<template>
  <view class="app-container">
    <view class="title-padding"></view>
    <NavBar title="忘记密码"></NavBar>
    <view class="content">
      <view class="form flex flex-wrap justify-center align-center">
        <view class="login-input-container">
          <CakeInput v-model="form.phone" placeholder="输入手机号">
            <template v-slot:prefix>
              <view class="input-phone-prefix">+86</view>
            </template>
            <template v-slot:suffix>
              <view
                class="input-phone-suffix"
                v-show="form.phone.length > 0"
                @tap="handleClearPhone"
              >
                <image mode="widthFix" src="../../static/form/close.png" />
              </view>
            </template>
          </CakeInput>
          <CakeInput v-model="form.code" placeholder="输入验证码">
            <template v-slot:prefix>
              <view class="input-phone-prefix pic-prefix">
                <image mode="widthFix" src="../../static/form/code.png" />
              </view>
            </template>
            <template v-slot:suffix>
              <view
                class="input-phone-suffix"
                v-show="form.code.length > 0"
                @tap="handleClearCode"
              >
                <image mode="widthFix" src="../../static/form/close.png" />
              </view>
            </template>
          </CakeInput>
          <CakeInput
            v-model="form.password"
            placeholder="输入新密码"
            type="password"
          >
            <template v-slot:prefix>
              <view class="input-phone-prefix pic-prefix">
                <image mode="widthFix" src="../../static/form/pass.png" />
              </view>
            </template>
            <template v-slot:suffix>
              <view
                class="input-phone-suffix"
                v-show="form.password.length > 0"
                @tap="handleClearPassword"
              >
                <image mode="widthFix" src="../../static/form/close.png" />
              </view>
            </template>
          </CakeInput>
        </view>
        <view class="login-button-container">
          <button @click="handleResetPassword" class="cu-btn shadow-blur round">
            确定
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/simpleNavBar/navbar.vue'
import CakeInput from '@/components/cakeInput/input.vue'
import { resetPassword } from '../../api/user.js'

export default {
  components: {
    NavBar,
    CakeInput,
  },
  data() {
    return {
      form: { phone: '', password: '', code: '' },
    }
  },
  methods: {
    handleClearPhone() {
      this.form.phone = ''
    },
    handleClearCode() {
      this.form.code = ''
    },
    handleClearPassword() {
      this.form.password = ''
    },
    handleResetPassword() {
      resetPassword(this.form)
        .then(res => {
          if (res.code === 1) {
            uni.showToast({
              title: '修改成功！',
              icon: 'success',
            })
            uni.navigateTo({
              url: '../profile/index',
            })
          } else if (res.msg) {
            uni.showToast({
              title: res.msg,
              icon: 'none',
            })
          }
        })
        .catch(err => {
          uni.showToast({
            title: '提交失败！',
            icon: 'none',
          })
        })
    },
  },
  onLoad: function (option) {},
}
</script>

<style lang="scss" scoped>
image {
  will-change: transform;
}

.app-container {
  height: 100vh;
  background-color: #ffffff;
  .content {
    .form {
      height: calc(100vh - var(--status-bar-height));
      .input-phone-prefix {
        font-size: 28upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(174, 190, 201, 1);
        line-height: 28upx;

        &.pic-prefix {
          width: 40upx;
          height: 40upx;
        }
      }
      .input-phone-suffix {
        width: 40upx;
        height: 40upx;
      }
      .login-button-container {
        button {
          width: 630upx;
          height: 100upx;
          background-color: rgba(20, 158, 255, 1);
          border-radius: 50upx;
          font-size: 36upx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          line-height: 100upx;
        }
      }
    }
  }
}
</style>
